import { Badge, Button, Card, Descriptions } from 'antd';
import { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';

import {getHosListDetailRequest} from "@/api/hospital/hodpitalListRequest"

import type {hosListReturnItemType,getHosListDetailReturnType ,hosListReturnSomeOfBookingRuleType } from "@api/hospital/model/hospitalListType"

export default function HospitalShow() {
  //获取编程式导航携带的id参数
  const {id} = useParams()
  //定义编程式路由跳转
  const navigate = useNavigate()

  //定义医院详情数据
  const [detail,setDetail] = useState<getHosListDetailReturnType>({})
  

  useEffect(() => {
    const hospitalDetail =async () => {
      const result = await getHosListDetailRequest(id as string)
      console.log(result);
      
      setDetail(result)
    }
    hospitalDetail()
  }, [])
  return (
    <Card>
      <Descriptions title="基本信息" bordered column={2}>
        <Descriptions.Item label="医院名称">
          { (detail.hospital as hosListReturnItemType)?.hosname }
        </Descriptions.Item>
        <Descriptions.Item label="医院logo">
          {(detail.hospital as hosListReturnItemType)?.logoData?
          <img width={100} src={`data:image/jpeg;base64,${(detail.hospital as hosListReturnItemType)?.logoData}`} alt="" /> 
           :''}
        </Descriptions.Item>
        <Descriptions.Item label="医院编码">
          {(detail.hospital as hosListReturnItemType)?.hoscode}
        </Descriptions.Item>
        <Descriptions.Item label="医院地址">
          {(detail.hospital as hosListReturnItemType)?.param.fullAddress}
        </Descriptions.Item>
        <Descriptions.Item label="坐车路线" span={2}>
          {(detail.hospital as hosListReturnItemType)?.route}
        </Descriptions.Item>
        <Descriptions.Item label="医院简介" span={2}>
          {(detail.hospital as hosListReturnItemType)?.intro}
        </Descriptions.Item>
      </Descriptions>
      <Descriptions title="预约规则信息" bordered column={2} style={{ marginTop: "30px" }}>
        <Descriptions.Item label="预约周期">
          {(detail.bookingRule as hosListReturnSomeOfBookingRuleType)?.cycle}
        </Descriptions.Item>
        <Descriptions.Item label="放号时间">
        {(detail.bookingRule as hosListReturnSomeOfBookingRuleType)?.releaseTime}
        </Descriptions.Item>
        <Descriptions.Item label="停挂时间">
        {(detail.bookingRule as hosListReturnSomeOfBookingRuleType)?.stopTime}
        </Descriptions.Item>
        <Descriptions.Item label="退号时间">
        {(detail.bookingRule as hosListReturnSomeOfBookingRuleType)?.quitTime}
        </Descriptions.Item>
        <Descriptions.Item label="预约规则" span={2}>
        {(detail.bookingRule as hosListReturnSomeOfBookingRuleType)?.rule.map(item=>{
          return <p>{item}</p>
        })}
        </Descriptions.Item>
      </Descriptions>
      <Button style={{ marginTop: "20px" }} onClick={()=>{navigate(-1)}}>返回</Button>
    </Card>
  );

}
